<!DOCTYPE html>
<html lang="zh-CN" data-i18n-page-title="settings">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 工作推荐App</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .settings-page {
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .settings-header {
            margin-bottom: 24px;
            display: flex;
            align-items: center;
        }
        
        .settings-title {
            font-size: 24px;
            font-weight: 500;
            margin: 0;
        }
        
        .settings-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 16px;
            margin-bottom: 16px;
        }
        
        .settings-section-title {
            font-size: 18px;
            margin: 0 0 16px 0;
            color: #333;
        }
        
        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .settings-item:last-child {
            border-bottom: none;
        }
        
        .settings-item-label {
            font-size: 16px;
            color: #333;
        }
        
        .settings-control {
            display: flex;
            align-items: center;
        }
        
        .settings-select {
            background-color: #f5f5f5;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 14px;
            color: #333;
            appearance: none;
            -webkit-appearance: none;
            padding-right: 28px;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 16px;
        }
        
        .settings-select:focus {
            outline: none;
            border-color: #1e88e5;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 52px;
            height: 26px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 26px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #1e88e5;
        }
        
        input:focus + .slider {
            box-shadow: 0 0 1px #1e88e5;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .back-button {
            display: flex;
            align-items: center;
            margin-right: 16px;
            color: #1e88e5;
            cursor: pointer;
        }
        
        .back-icon {
            width: 24px;
            height: 24px;
            margin-right: 4px;
        }
        
        .logout-button {
            display: block;
            width: 100%;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 0;
            font-size: 16px;
            font-weight: 500;
            margin-top: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .logout-button:hover {
            background-color: #d32f2f;
        }
        
        @media (max-width: 480px) {
            .settings-page {
                padding: 16px;
            }
            
            .settings-title {
                font-size: 20px;
            }
            
            .settings-section-title {
                font-size: 16px;
            }
            
            .settings-item-label {
                font-size: 14px;
            }
            
            .back-icon {
                width: 20px;
                height: 20px;
            }
        }
    </style>
</head>
<body class="page">
    <div class="page-content settings-page">
        <header class="settings-header">
            <div class="back-button">
                <img src="../images/back.svg" alt="返回" class="back-icon">
                <span data-i18n="back">返回</span>
            </div>
            <h1 class="settings-title" data-i18n="settings">设置</h1>
        </header>
        
        <section class="settings-section">
            <h2 class="settings-section-title" data-i18n="language">语言</h2>
            <div class="settings-item">
                <div class="settings-item-label" data-i18n="language">语言</div>
                <div class="settings-control">
                    <select id="language-selector" class="settings-select">
                        <option value="zh-CN">简体中文</option>
                        <option value="en-US">English</option>
                        <option value="ja-JP">日本語</option>
                    </select>
                </div>
            </div>
        </section>
        
        <section class="settings-section">
            <h2 class="settings-section-title" data-i18n="display">显示设置</h2>
            <div class="settings-item">
                <div class="settings-item-label" data-i18n="dark_mode">深色模式</div>
                <div class="settings-control">
                    <label class="switch">
                        <input type="checkbox" id="dark-mode-toggle">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            <div class="settings-item">
                <div class="settings-item-label" data-i18n="notifications">通知</div>
                <div class="settings-control">
                    <label class="switch">
                        <input type="checkbox" id="notifications-toggle" checked>
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
        </section>
        
        <section class="settings-section">
            <h2 class="settings-section-title" data-i18n="about">关于</h2>
            <div class="settings-item">
                <div class="settings-item-label" data-i18n="about">关于我们</div>
                <div class="settings-control">
                    <a href="#" id="about-link">></a>
                </div>
            </div>
            <div class="settings-item">
                <div class="settings-item-label" data-i18n="help">帮助</div>
                <div class="settings-control">
                    <a href="#" id="help-link">></a>
                </div>
            </div>
            <div class="settings-item">
                <div class="settings-item-label" data-i18n="feedback">反馈</div>
                <div class="settings-control">
                    <a href="#" id="feedback-link">></a>
                </div>
            </div>
        </section>
        
        <button class="logout-button" id="logout-button" data-i18n="logout">退出登录</button>
    </div>

    <script src="../js/i18n.js"></script>
    <script src="../js/api.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 在i18n初始化完成后，确保页面文本已翻译
            if (window.i18n) {
                i18n.translatePage();
                
                // 将语言选择器设置为当前语言
                const languageSelector = document.getElementById('language-selector');
                const currentLanguage = i18n.getCurrentLanguage();
                
                if (languageSelector) {
                    languageSelector.value = currentLanguage;
                    
                    // 添加语言切换事件
                    languageSelector.addEventListener('change', function() {
                        i18n.changeLanguage(this.value);
                    });
                }
            }
            
            // 返回按钮
            const backButton = document.querySelector('.back-button');
            if (backButton) {
                backButton.addEventListener('click', function() {
                    window.history.back();
                });
            }
            
            // 深色模式切换
            const darkModeToggle = document.getElementById('dark-mode-toggle');
            if (darkModeToggle) {
                // 检查本地存储的深色模式设置
                const isDarkMode = localStorage.getItem('dark-mode') === 'true';
                darkModeToggle.checked = isDarkMode;
                
                // 如果是深色模式，添加类到body
                if (isDarkMode) {
                    document.body.classList.add('dark-mode');
                }
                
                // 监听深色模式切换
                darkModeToggle.addEventListener('change', function() {
                    if (this.checked) {
                        document.body.classList.add('dark-mode');
                        localStorage.setItem('dark-mode', 'true');
                    } else {
                        document.body.classList.remove('dark-mode');
                        localStorage.setItem('dark-mode', 'false');
                    }
                });
            }
            
            // 通知设置
            const notificationsToggle = document.getElementById('notifications-toggle');
            if (notificationsToggle) {
                // 检查本地存储的通知设置
                const notifications = localStorage.getItem('notifications') !== 'false';
                notificationsToggle.checked = notifications;
                
                // 监听通知切换
                notificationsToggle.addEventListener('change', function() {
                    localStorage.setItem('notifications', this.checked.toString());
                });
            }
            
            // 退出登录
            const logoutButton = document.getElementById('logout-button');
            if (logoutButton) {
                logoutButton.addEventListener('click', function() {
                    if (window.apiService && typeof apiService.logout === 'function') {
                        apiService.logout();
                    }
                    
                    // 重定向到登录页
                    window.location.href = '../index.html';
                });
            }
            
            // 监听语言变更事件
            window.addEventListener('message', function(event) {
                // 确保消息来源可信
                if (event.origin !== window.location.origin) return;
                
                // 处理语言变更消息
                if (event.data && event.data.type === 'language-change') {
                    const language = event.data.language;
                    
                    // 如果页面有i18n对象，应用语言变更
                    if (window.i18n && languageSelector) {
                        i18n.changeLanguage(language);
                        languageSelector.value = language;
                    }
                }
            });
        });
    </script>
</body>
</html> 